<!--
 * @Author: zjj
 * @Date: 2019-12-25 13:50:42
 * @LastEditors  : zjj
 * @LastEditTime : 2020-01-14 11:36:13
 -->
<!--  -->
<template>
  <div
    class="rule-dialog flex flex-column justify-center aligin-center"
    @click="$emit('close')"
    v-if="ruleFlag"
  >
    <div class="content flex flex-column aligin-center justify-center" @click.stop>
      <div class="title">活动号码取数规则</div>
      <div class="bg flex flex-column aligin-center justify-center">
        <div class="tip">本次幸运号码取数规则</div>
        <div class="dash-line mt-17"></div>
        <div class="rule-compute flex aligin-center">
          <div class="flex aligin-center">
            <span>(</span>
            <div class="flex flex-column aligin-center">
              <div>{{info.winningNumber}}</div>
              <div class="division"></div>
              <div>{{info.power}}</div>
            </div>
            <span>)</span>
          </div>
          <span>的余数+100001={{info.luck_number}}</span>
        </div>
        <div class="dash-line mt-35"></div>
         <div class="result">{{c_rule(info)}}</div>
      <div class="code">{{info.winningNumber}}</div>
      </div>
     
    </div>
    <span class="close" @click="$emit('close')">X</span>
  </div>
</template>

<script>
export default {
  props:{
    info:{
      type:Object,
      default:()=>{
        return {}
      },
      required:true
    },
    ruleFlag:{
      type:Boolean,
      default:()=>{
        return false
      },
      required:true
    }
  },
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {
    c_rule(info){
      switch(info.type){
        case 0:
          return '时时彩'+ '第'+info.period+'期开奖号码';
        case 1:
          return "体彩排列5"+ '第'+info.period+'期开奖号码'
        case 2:
          return '购买时间排列取值之和'
      }
    }
  },
  created() {},
  mounted() {},
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.rule-dialog {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 300;
  .content {
    width: 346px;
    height: 402px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 15px 0px rgba(127, 127, 127, 0.3);
    border-radius: 10px;
    animation: show 0.3s ease;
    @keyframes show {
      0% {
        transform: scale(0.2);
      }
      100% {
        transform: scale(1);
      }
    }
    .title {
      font-size: 19px;
      color: #a96745;
    }
    .bg {
      margin-top: 27px;
      width: 100%;
      height: 280px;
      background: url("../assets/imgs/rule-dialog-bg.png");
      background-size: 100% 100%;
      font-size: 16px;
      color: #fff;
      .mt-17 {
        margin-top: 17px;
      }
      .mt-35 {
        margin-top: 35px;
      }
      .dash-line {
        width: 229px;
        height: 0;
        border: 1px dashed rgba(253, 228, 213, 1);
      }
      .rule-compute {
        margin-top: 31px;
        font-size: 18px;
      }
      .division {
        width: 67px;
        height: 1px;
        background: #fff;
      }
      .result {
        margin-top: 21px;
        font-size: 12px;
        line-height: 24px;
      }
      .code {
        font-size: 15px;
      }
    }
  }
  .close {
    margin-top: 16px;
    height: 33px;
    width: 33px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
    text-align: center;
    line-height: 33px;
    animation: show 0.3s ease;
    @keyframes show {
      0% {
        transform: scale(0.2);
      }
      100% {
        transform: scale(1);
      }
    }
  }
}
</style>